let btn = document.querySelector("button");
let control = document.querySelector(".control");
let items = document.querySelector(".items");
let itemList = document.querySelectorAll(".item");
let ready = document.querySelector(".ready");
let flag = true;
btn.addEventListener("click", () => {
  control.style.transform = "scale(0)";
  items.style.display = "block";
  ready.style.display = "block";
  let i = 0;
  itemList.forEach((item) => {
    item.classList.remove("in", "out");
  });
  let Interval = setInterval(() => {
    if (flag) {
      itemList[i].classList.add("in");
    } else {
      itemList[i].classList.add("out");
    }
    flag = !flag;
    if (flag) i++;
    if (i === 4) {
      clearInterval(Interval);
      control.style.transform = "scale(1)";
      items.style.display = "none";
      ready.style.display = "none";
    }
  }, 500);
  //   let Interval = setInterval(() => {
  //     itemList[i].style.transform = `rotate(${h}deg)`;
  //     if (i + 1 < 5) itemList[i + 1].style.transform = `rotate(${h + 90}deg)`;
  //     h -= 90;
  //     if (h === -180 && i < 5) {
  //       h = 0;
  //       i++;
  //     }
  //     if (i >= 5) {
  //       clearInterval(Interval);
  //       itemList.forEach((item) => {
  //         item.style.transform = `rotate(90deg)`;
  //       });
  //       control.style.transform = "scale(1)";
  //       items.style.display = "none";
  //       ready.style.display = "none";
  //     }
  //   }, 500);
});
